<template lang="pug">
  Modal(v-model="createShow" title="新建用户" width="800")
    Steps(:current="createCurrent")
      Step(title="基本信息" icon="ios-person")
      Step(title="上传用户头像" icon="ios-card")
    Divider
    .created-info
      Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120")
        FormItem(label="所属公司：" prop="companyId")
          Select.input-has-border(v-model="formValidate.companyId ")
            Option(v-for="(item, index) in listData" :value="item.id" :key="index") {{ item.name }}
        //- Upload.text-center.mb-20(:before-upload="handleUpload" action="//jsonplaceholder.typicode.com/posts/" :format="['jpg','jpeg','png']")
        //-   .avatar
        //-     img(v-if="this.formValidate.avatar" :src="imgUrl")
        //-     span(v-else) 点击上传头像
        Row(type="flex" justify="start")
          Col(span="12")
            FormItem(label="姓名：" prop="name")
              Input.input-has-border(v-model="formValidate.name" type="text" placeholder="请输入订单内容")
          Col(span="12")
            FormItem(label="性别：" prop="sex")
              Select.input-has-border(v-model="formValidate.sex")
                Option(v-for="(item, index) in sex_arr" :value="item.key" :key="index") {{ item.value }}
          Col(span="12")
            FormItem(label="证件类型：" prop="idType")
              Select.input-has-border(v-model="formValidate.idType")
                Option(v-for="(item, index) in idcardtype_arr" :value="item.key" :key="index") {{ item.value }}
          Col(span="12")
            FormItem(label="证件号码：" prop="idCardNo")
              Input.input-has-border(v-model="formValidate.idCardNo" type="text" placeholder="请输入身份证号码")
          Col(span="12")
            FormItem(label="出生日期：" prop="birthDay")
              DatePicker.input-has-border(:value="formValidate.birthDay" type="date" placeholder="请选择出生年月" style="width:100%" @on-change="birthChange")
          Col(span="12")
            FormItem( label="学历：" prop="degree")
              Select.input-has-border(v-model="formValidate.degree")
                Option(v-for="(item, index) in degreeArr" :value="item.key" :key="index") {{ item.value }}
          Col(span="12")
            FormItem.input-has-border(label="手机号码：" prop="Phone")
              Input(v-model="formValidate.Phone" type="number" placeholder="请输入手机号码")
          Col(span="12")
            FormItem( label="用工形式：")
              Select.input-has-border(v-model="formValidate.employeeType")
                Option(value="service") 劳务工
          Col(span="12")
            FormItem(label="目前居住地：")
              Cascader.input-has-border(placeholder="请选择参保地区" :filterable="true" :data="areaArr" :change-on-select="true" :load-data="loadDataCity" @on-change="areaChange")
          Col(span="12")
            FormItem(label="工作经验：")
              Input.input-has-border(v-model="formValidate.workExperience" type="text" placeholder="请填写工作经验")
          Col(span="12")
            FormItem(label="做过职业：")
              Input.input-has-border(v-model="formValidate.postExperience" type="text" placeholder="请输入")
          Col(span="12")
            FormItem(label="身份：")
              RadioGroup(type="button" v-model="formValidate.ifStudent")
                Radio(label="1") 学生
                Radio(label="0") 非学生
          Col(span="12")
            FormItem(label="银行卡：")
              Input.input-has-border(v-model="formValidate.salaryCard.accountNo" type="text" placeholder="请输入银行卡号")
    .text-center(slot="footer")
      Button(@click="createShow=false") 取消
      Button(type="info" @click="confirmFn('formValidate')") 提交
</template>

<script>
import dataApi from '@/api/data.js'
import vOrderApi from '@/api/v_order.api.js'

export default {
  props: {
    sex_arr: Array,
    degreeArr: Array, // 学历
    idcardtype_arr: Array, // 证件类型
  },
  data () {
    return {
      listData: [], // 公司列表
      createCurrent: 0,
      areaArr: [], // 地址
      time_1: '',
      time_2: '',
      imgUrl: '',
      createShow: false,
      formValidate: {
        DataSource: '1',
        AuditStatus: '1',
        workExperience: '',
        postExperience: '',
        ifStudent: '',
        id: '', // 员工ID
        companyId: '', // 公司ID
        companyName: '', // 公司名称
        insuranceId: '', // 保险ID
        name: '',
        eName: '',
        idType: '0',
        idCardNo: '',
        otherIdCardNo: '',
        birthDay: '',
        sex: '',
        age: '',
        race: '',
        birthplace: '',
        idCardStartTime: '',
        idCardEndTime: '',
        idCardAddress: '',
        residentAddress: '',
        Phone: '',
        email: '',
        emergencyContact: '',
        emergencyContactPhone: '',
        maritalStatus: '',
        hasChildren: '',
        professionalTitle: '',
        degree: '',
        schoolName: '',
        graduationDate: '',
        discipline: '',
        onBoardingDate: '',
        department: '',
        duty: '',
        employeeNo: '',
        employeeType: 'service',
        employeeTypeName: '劳务工',
        beHiring: 'true',
        city: [],
        cityStr: '',
        accountName: '',
        bankName: '',
        accountNo: '',
        salaryCard: {
          accountName: '',
          bankName: '',
          accountNo: ''
        }
      },
      ruleValidate: {
        companyId: [
          { required: true, message: '请选择所属公司', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        degree: [
          { required: true, message: '请选择学历', trigger: 'change' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        Phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' }
        ],
        idType: [
          { required: true, message: '请选择证件类型', trigger: 'change' }
        ],
        idCardNo: [
          { required: true, message: '请输入证件号码', trigger: 'blur' }
        ],
        birthDay: [
          { required: true, message: '请选择出生日期', trigger: 'change' }
        ]
      }
    }
  },
  created () {
    // this.getEnum()
    this.getProvince()
    this.getListData()
  },
  methods: {
    birthChange (val) {
      this.formValidate.birthDay = val
    },
    // 获取公司
    getListData () {
      dataApi.postCustomerList({
        ContractWillBeExpiredMonths: '',
        Name: '',
        CooperateStatus: 1,
        CooperateType: '',
        CityId: '',
        ServerId: '',
        PageIndex: '',
        PageSize: '',
        DataSource: 1
      }).then(res => {
        console.log(res)
        if (res.data.success) {
          this.listData = res.data.data
        } else {
          
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    modalOpen () {
      this.createShow = true
    },
    handleUpload (file) {
      this.formValidate.avatar = file
      console.log(this.formValidate.avatar)
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        const _base64 = reader.result
        this.imgUrl = _base64
      }
      return false
    },
    createdWorker () {
      vOrderApi.createVworker(this.formValidate).then(res => {
        console.log(res)
        if (res.data.success) {
          this.createShow = false
          this.$Message.success(res.data.message)
          this.$emit('get-list')
        } else {
          
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    confirmFn (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          // this.$Message.success('Success!')
          this.createdWorker()
        } else {
        }
      })
    },
    getEnum () {
      let groupNames = 'employee.degree,employee.sex,employee.idcardtype'
      dataApi.getEnum({
        groupName: groupNames
      }).then(res => {
        this.degreeArr = this.getItems(res.data, 'employee.degree')
        this.sex_arr = this.getItems(res.data, 'employee.sex')
        this.idcardtype_arr = this.getItems(res.data, 'employee.idcardtype')
      })
    },
    getItems (arr, key) {
      let object = arr.find((item) => {
        return item.group === key
      })
      return object.items
    },
    areaChange (value, selectedData) {
      console.log(value, selectedData)
      let arr = selectedData.map(item => {
        return item.name
      })
      this.formValidate.residentAddress = arr.join('/')
    },
    getProvince () {
      dataApi.getProvince().then(res => {
        this.areaArr = res.data.data.map(item => {
          return {
            ...item,
            label: item.name,
            value: item.id,
            children: [],
            loading: false
          }
        })
      })
    },
    loadDataCity (val, callback) {
      val.loading = true
      if (val.levelID === 2) {
        dataApi.getCity({ parentId: val.value }).then(res => {
          val.children = res.data.data.map(item => {
            return {
              ...item,
              label: item.name,
              value: item.id,
              children: [],
              loading: false
            }
          })
          val.loading = false
          callback()
        })
      } else {
        dataApi.getArea({ parentId: val.value }).then(res => {
          val.children = res.data.data.map(item => {
            return { ...item, label: item.name, value: item.id }
          })
          val.loading = false
          callback()
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
  span.style-1{
    vertical-align: middle;
  }
  .d-f-c{
    display: flex;
    align-items: center;
  }
  .avatar{
    width: 80px;
    height: 80px;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
    line-height: 80px;
    cursor: pointer;
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
</style>
